<template>
    <el-tabs v-model="selectPage" type="card" @tab-click="handleClick" @tab-remove="tabRemove" class="myTab">
        <el-tab-pane v-for="item in options" :key="item.index" :name="item.index" :closable="!item.closable">
            <template #label>
                <span class="label">
                    <el-icon size="16">
                        <component :is="item.icon || 'Menu'"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </span>
            </template>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import { watch, ref, watchEffect, } from 'vue'
import { breadcrumbList, menuInfo } from '@/store/pinia'
import { useRouter } from "vue-router";
import { getTreeData } from '@/hooks/menu/treeFindPath'
const router = useRouter()
let options = ref([])
watchEffect(() => {
    options.value = breadcrumbList().data
})
let selectPage = ref('')
watchEffect(() => {
    selectPage.value = menuInfo().name
})
/* 点击tab */
const handleClick = name => {
    console.log(name);
    menuInfo().updateMenuName(name.paneName)
    breadcrumbList().updateFilterData(getTreeData(menuInfo().list, name.paneName))
    router.push({ name: name.paneName })
}
/* 关闭tab */
const tabRemove = TabPaneName => {
    breadcrumbList().removeBreadcrumbList(TabPaneName)
    router.push({ name: menuInfo().name })
}
</script>
<style>
.myTab .el-tabs__header .is-active {
    color: var(--isActive-color)
}

.el-tabs__content {
    display: none;
}

.myTab .el-tab-pane {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--el-fill-color-blank);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    box-shadow: 0 0 12px #0000000d;
    overflow-x: hidden;
}
.myTab .el-tabs__header .el-tabs__item{
    border: 1px solid transparent !important ;
}
.myTab .el-tabs__header .is-active{
    border-bottom: 2px solid var(--isActive-color) !important;
}
.myTab .el-tabs__header .el-tabs__nav{
    border-color: transparent !important;
}
.myTab .el-tabs__item:hover {
    color: var(--isActive-color);
}
.myTab .el-tabs__item:hover {
    color: var(--isActive-color);
}
.slide-fade-enter-active {
    transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.2s;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(50px);
    opacity: 0;
}
.myTab .label>span,
.myTab .label>.el-icon,
.myTab .is-icon-close {
    vertical-align: middle;
    color: #ccc;
}
.myTab .is-active .label>span,
.myTab .is-active .label>.el-icon,
.myTab .is-active .is-icon-close {
    color: var(--isActive-color);
}
.myTab .label>.el-icon {
    margin-right: 3px;
}</style>
